

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单元素</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        .layui-form-label{
            top:30px;
        }
        .layui-input-block{
            padding-top:30px;
            padding-right: 40px;
        }

    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6" style="width: 1146px">
            <div class="layui-card layui-form" lay-filter="batchAdd" id="batchAdd">
                <!--所属批次-->
                <div class="layui-form-item">
                    <label class="layui-form-label">所属批次</label>
                    <div class="layui-input-block">
                        <select id="batchId" name="batchId" lay-verify="required" >
                            <option value="">请选择寒衣批次</option>
                        </select>
                    </div>
                </div>
                <!--寒衣名称-->
                <div class="layui-form-item">
                    <label class="layui-form-label">寒衣名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--寒衣编码-->
                <div class="layui-form-item">
                    <label class="layui-form-label">寒衣编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNumber" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!--适用性别-->
                <div class="layui-form-item">
                    <label class="layui-form-label">适用性别</label>
                    <div class="layui-input-block" id="gender">
                    </div>
                </div>
                <!--图片-->
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <div id="imgs"></div>
                        <button type="button" class="layui-btn" id="imgUpload">图片上传</button>
                    </div>
                </div>
                <!--规格-->
                <div class="layui-form-item">
                    <label class="layui-form-label">规格</label>
                    <div class="layui-input-block">
                        <div id="skus"></div>
                        <button type="button" class="layui-btn" id="sku-add">添加规格</button>
                    </div>
                </div>
                <!--尺码表-->
                <div class="layui-form-item">
                <label class="layui-form-label">尺码表</label>
                <div class="layui-input-block">
                    <textarea id="editArea" style="display: none;" name="description"></textarea>
                </div>
            </div>
                <!--提交-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit"  id="submit">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="clear">重置</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<script src="layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','laydate','form','upload','layedit'], function(){
        var $ = layui.$
            ,layedit=layui.layedit
            ,upload=layui.upload
            ,admin = layui.admin
            ,element = layui.element
            ,laydate = layui.laydate
            ,form = layui.form;
        /*渲染批次下拉框*/
        $.ajax({
            type:'get',
            url:'/batchSetting/list',
            success: function (res) {
                console.log(res)
                $(res.data.records).each(function (index, item) {
                    var $new = $("<option value='" + item.id + "'>" + item.name + "</option>")
                    $("#batchId").append($new)
                })
                form.render('select');
            }
        })
        /*加载性别*/
        $.ajax({
            type:'get',
            url:'/dictionary/getByType?type=GENDER',
            success: function (res) {
                $(res.data).each(function (index, item) {
                    console.info(item)
                    var $new = $("<input type='radio' name='gender' value='"+item.itemValue+"' title='"+item.itemName+"' />")
                    $("#gender").append($new)
                })
                form.render('radio')
            }
        })

        /*富文本框上传图片*/
        layedit.set({
            uploadImage:{
                url:'/api/file/layUpload'
            }
        })
        /*富文本编辑框*/
        var edit=layedit.build('editArea')

        /*图片回显
        * 图片删除事件*/
        upload.render({
            elem: '#imgUpload'
            ,url: '/api/file/upload'
            ,done: function(res){
                var $new = $("<p><img class='img' width='300px' src='"+res.url+"' /><button class='delete-img'>删除</button> </p>")
                $("#imgs").append($new)
                $(".delete-img").click(function () {
                    $(this).parents('p').remove()
                })
            }
        });
        /*规格*/
        $("#sku-add").click(function () {
            var $new = $("<p><input name='sku' type='text' /><button class='delete-sku'>删除</button></p>")
            $("#skus").append($new)
            $(".delete-sku").click(function () {
                $(this).parents('p').remove()
            })
        })
     /*提交按钮*/
     form.on('submit(submit)',function (data) {
         data.field.description=layedit.getContent(edit)
         var urls=[]
         $(".img").each(function (index,item) {
             urls.push($(this).attr('src'))
         })
         var skus= []
         $("input[name='sku']").map(function (index,item) {
             skus.push($(this).val())
         })
         data.field.urls=urls
         data.field.skus=skus
         $.ajax({
             type:'post',
             url:'product/save',
             data:JSON.stringify(data.field),
             contentType:'application/json',
             success:function (res) {
                 if (res){
                     layer.msg('添加成功！',{icon:6,time:1000},function () {
                         location='/product-add'
                     })
                 }
             }
         })
     })


    });
</script>
</body>
</html>